import { View } from "@tarojs/components"
import Taro, { getCurrentPages } from "@tarojs/taro";
import { getStaticState } from "../../state/static-store";
import { useState } from 'react';
import { isFun, implementFun } from "../../common/tool";
import './index.scss';

/**
 * 导航头部
 */
export const NavHeader = function({navText = '哲趣小助手', navIcon}: {navText?: string, navIcon?: string}) {
  const page = getCurrentPages();
  const currenPage = page[page.length - 1];
  const isIndex = currenPage?.$taroPath?.match?.('pages/index/index')?.[0] ? true : false;
  const className = navIcon ? `back ${navIcon}` : `back ${ page.length === 1 ? 'home_left' : 'arrow_left'}`;
  const { statusBarHeight } = getStaticState('systemInfo');
  const rect = Taro.getMenuButtonBoundingClientRect()
  const back = () => {
    if(!isIndex && page.length === 1) {
      Taro.reLaunch({
        url: '/pages/index/index'
      })
    } else {
      Taro.navigateBack({
        delta: 1,
      });
    };
  };

  return (<View className='nav-header' style={{height: `${statusBarHeight + ((rect.top - statusBarHeight) * 2) + rect.height}px`}}>
      <View className="nav-header-info" style={{top: `${rect.top}px`, height: `${rect.height}px`}}>
        <View className="text">{navText}</View>
        {
          isIndex ? <View></View>
            : <View className={className} onClick={ () => back()}></View>
        }
      </View>
  </View>);
}
/**
 * 内容主体
 */
 enum MoveSate {
  start,
  end
}
/**
 * 页面体组件
 */
export const Body = function(props) {
  const [position, setPosition] = useState({x: 0, y: 0});
  const [control, setControl] = useState({gameSate: MoveSate.start, moveEnd: false});
  const {
    onTouchEnd,
    onTouchMove,
    onTouchStart,
    moveRight,
    moveLeft,
    moveTop,
    moveBottom,
    children,
    isMove = false,
    moveDistance = 50,
    isNav = true,
    navText,
    navIcon,
    isNavSeat = true
  } = props;
  const { statusBarHeight, safeArea } = getStaticState('systemInfo');
  const setMoveEnd = (val: boolean) => {
    setControl((item) => {
      item.moveEnd = val;
      return item;
    })
  }
  const endEvent = (e) => {
    setMoveEnd(false);
  }
  const moveEvent = (e) => {
    if (control.moveEnd) {
      return;
    }
    const { touches } = e;
    const { pageX, pageY }: { pageX: number, pageY: number} = touches[0];
    const { x, y }:{ x: number, y: number} = position;
    const distanceX = pageX - x;
    const distanceY = pageY - y;
    if (distanceX > moveDistance) {
      // right
      implementFun(moveRight)
      setMoveEnd(true);
    }
    if (distanceX < -moveDistance) {
      // left
      implementFun(moveLeft)
      setMoveEnd(true);

    }
    if (distanceY > moveDistance) {
      // bottom
      implementFun(moveBottom)
      setMoveEnd(true);

    }
    if (distanceY < -moveDistance) {
      // top
      implementFun(moveTop)
      setMoveEnd(true);
    }

  }
  const startEvent = (e) => {
    if (!isMove) {
      setMoveEnd(true);
      return;
    }
    const { changedTouches = [] } = e;
    const { pageX, pageY} = changedTouches[0];
    setPosition({x: pageX, y: pageY});
    setMoveEnd(false);
  }
  const className = `body ${props.className}`;
  return (
  <View
    className={className}
    onTouchEnd={(e) => { isFun(onTouchEnd) && onTouchEnd(e); endEvent(e) }}
    onTouchMove={(e) =>{ isFun(onTouchMove) && onTouchMove(e); moveEvent(e) }}
    onTouchStart={(e) =>{ isFun(onTouchStart) && onTouchStart(e); startEvent(e) }}
  >
    {isNav ? <View className="header-seat"
      style={{
        height: `${statusBarHeight + safeArea.top}px`,
        position: isNavSeat ? 'relative': 'fixed',
      }}>
      <NavHeader navText={navText}
                    navIcon={navIcon}/>
    </View> : null}
    <View className={`"body-content ${props.bodyClassName}`}>
    {children}
    </View>
  </View>
  )
}